<template>
	<view>
		<u-top-tips ref="uTips"></u-top-tips>
		<view class="u-demo">
			<view class="u-demo-wrap">
				<view class="u-demo-title">
					加入我们成为创作者，分享自己的技术，和更多开发者一起交流，让世界更加美好🌹
				</view>
				<view class="u-demo-area">
					<u-image width="300rpx" height="300rpx" src="../../static/blog.png"></u-image>
				</view>
			</view>
			<view class="btn">
				<u-button type="primary" @click="showapply">立即申请</u-button>
			</view>
		</view>
		<u-modal v-model="show" :content="content" :show-cancel-button="true" @confirm="toapply"></u-modal>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				show: false,
				content: "确定是否申请",
			}
		},
		computed: {
			...mapGetters({
				info: "vuex_user"
			})
		},
		methods: {
			showapply() {
				this.show = true
			},
			toapply() {
				this.$u.api.postapply_author({
					username: this.info.username
				}).then(res => {
					console.log(res)
					if (res.code == 500)
						this.$refs.uTips.show({
							title: res.msg,
							type: 'error',
							duration: '2300'
						})
					else
					this.$refs.uTips.show({
						title: res.msg,
						duration: '2300'
					})
				})
			}
		}
	}
</script>

<style scoped>
	.u-demo {
		padding: 50rpx 40rpx;
	}

	.u-demo-wrap {
		text-align: center;
		border-width: 1px;
		border-color: #ddd;
		border-style: dashed;
		background-color: rgb(250, 250, 250);
		padding: 40rpx 20rpx;
		border-radius: 6px;
		height: 500rpx;
	}

	.u-demo-area {
		text-align: center;
	}

	.u-image {
		margin: 0 auto;
		margin-top: 20rpx;
	}

	.btn {
		margin-top: 300rpx;
	}
</style>
